<template>
  <div class="protocol-viewer-container">
    <div class="protocol-list-container">
      <div class="list-header">
        <div class="header-left">
          <h2>协议列表</h2>
        </div>
        <div class="header-right">
          <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item label="角色名称">
              <el-input
                  v-model="searchForm.roleName"
                  clearable
                  placeholder="请输入角色名称"
                  style="width: 180px;"
              />
            </el-form-item>
            <el-form-item label="角色键">
              <el-input
                  v-model="searchForm.roleKey"
                  clearable
                  placeholder="请输入角色键"
                  style="width: 180px;"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
            </el-form-item>
          </el-form>
          <div class="action-buttons">
            <el-button type="success" @click="handleAddSysRole">新增角色</el-button>
          </div>
        </div>
      </div>
      <div class="list-content">
        <el-table
            v-loading="loading"
            :data="sysRoleList"
            border
            fit
            style="width: 100%"
        >
          <el-table-column label="角色Id" min-width="160" prop="id" show-overflow-tooltip/>
          <el-table-column label="角色名称" min-width="180" prop="roleName" show-overflow-tooltip/>
          <el-table-column label="角色键" min-width="160" prop="roleKey" show-overflow-tooltip/>
          <el-table-column align="center" fixed="right" label="操作" min-width="120">
            <template #default="scope">
              <el-button
                  size="small"
                  type="primary"
                  @click.stop="handleConfigSysMenu(scope.row.id)"
              >
                菜单配置
              </el-button>
              <el-button
                  size="small"
                  type="danger"
                  @click.stop="handleDeleteRole(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="pagination-container">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="(page: any) => handlePageChange(page, pageSize)"
          />
        </div>
      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>

import {onMounted, reactive, ref} from "vue";
import {queryAllRoleByPage} from "@/api/system/sysRole";
import {message} from "@/utils/ElmessasgeUtils";

// 分页相关数据
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);


//------------------
const loading = ref(false);
const sysRoleList = ref<any>([])

function handleConfigSysMenu(id: any) {
}

function handleDeleteRole(id: any) {

}

function handleAddSysRole() {

}


// 搜索表单数据
const searchForm = reactive({
  roleName: '',
  roleKey: '',

});

async function handleSearch() {
  // 重置当前页码
  currentPage.value = 1;
  // 重新获取数据
  await fetchRoleList();

}

async function fetchRoleList() {
  let baseParams = {
    ...searchForm,   // 分页参数
    pageNum: currentPage.value,
    pageSize: pageSize.value,
  }

  let res = await queryAllRoleByPage(baseParams);
  if (res.data.code == 200) {
    let responseData = res.data.data;
    // 从分页对象中提取数据列表
    let data: any[] = Array.isArray(responseData.records) ? responseData.records : [];
    total.value = Number(responseData.total) || data.length || 0;
    sysRoleList.value = data;

  } else {
    message("获取角色列表失败", 'error');
  }
}

// 分页变化处理
const handlePageChange = (page: number, size: number) => {
  currentPage.value = page;
  if (size) {
    pageSize.value = size;
  }
  // 重新获取数据
  fetchRoleList();
};

function handleSizeChange(size: number) {
  pageSize.value = size;
  currentPage.value = 1;

  // 重新获取数据

  fetchRoleList();
}

onMounted(async () => {
  await handleSearch()
})

</script>


<style scoped>
.protocol-viewer-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 600px;
}

/* 列表模式样式 */
.protocol-list-container {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100%;
}

.list-header {
  padding: 20px 20px 15px 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 50px;
  height: 32px; /* 与按钮和输入框高度保持一致 */
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.list-header h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
  line-height: 32px; /* 与按钮和输入框高度保持一致 */
  height: 32px;
  display: flex;
  align-items: center;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.search-form :deep(.el-form-item) {
  margin: 0;
  padding: 0;
}

.action-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.list-content {
  flex: 1;
  padding: 15px 20px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 15px;
  padding: 10px 0;
  border-top: 1px solid #ebeef5;
}

/* 确保分页组件始终显示，即使total为0 */
:deep(.el-pagination) {
  display: flex;
  flex-wrap: wrap;
}

:deep(.el-pagination__total) {
  display: block;
}

.header-left {
  display: flex;
  align-items: center;
}


</style>
